<!-- 评论 组件 -->
<template>
  <div id="commentCard" @mouseenter="isShow=true" @mouseleave="isShow=false">
    <!-- 评论用户头部 -->
    <div style="border-bottom: 1px solid #f6f6f6;">
      <div class="head_box">
        <!-- 图像 -->
        <img src="../assets/user-sex-male.png" class="head_img">
        <!-- 用户名 -->
        <span class="head_name">{{ list.username }}</span>
        <span v-if="isReply && list.comment.fromID!=0" style="color: #8590a6;font-size: 15px;float: left;line-height: 25px;margin: 0px 10px;">回复</span>
        <span class="head_name" v-if="isReply && list.comment.fromID!=0">{{ list.fromname }}</span>
        <!-- 时间 -->
        <span class="head_time">{{ list.comment.time }}</span>
      </div>
      <!-- 评论内容 -->
      <div class="comment_box">
        <span class="comment_text">{{ list.comment.content }}</span>
      </div>
      <!-- 评论功能区 -->
      <div class="comment_function">
        <!-- 点赞按钮 未点赞 -->
        <div class="btn_good1" v-show="!isGood" @click="doChangeGood" :style="{color:isGood?'#0084ff':''}">
          <div class="good_img1"></div>
          <span class="good_number">{{ list.comment.goodNum }}</span>
        </div>
        <!-- 点赞按钮 已点赞 -->
        <div class="btn_good2" v-show="isGood" @click="doChangeGood" :style="{color:isGood?'#0084ff':''}">
          <div class="good_img2"></div>
          <span class="good_number">{{ list.comment.goodNum }}</span>
        </div>
        <!-- 回复按钮 -->
        <div class="btn_reply" v-show="isShow" @click="isOpen=!isOpen">
          <img src="../assets/reply_gray.png" class="bad_img">
          <span class="bad_text" v-show="!isOpen">回复</span>
          <span class="bad_text" v-show="isOpen">取消回复</span>
        </div>
        <!-- 踩按钮 -->
        <div class="btn_bad" v-show="isShow" @click="doChangeBad">
          <img src="../assets/badVote_gray.png" class="bad_img" style="margin-top: 6px;">
          <span class="bad_text" v-show="!isBad" @click="isBad=!isBad">踩</span>
          <span class="bad_text" v-show="isBad" @click="isBad=!isBad">取消踩</span>
        </div>
        <!-- 举报按钮 -->
        <div class="btn_report" v-show="isShow">
          <img src="../assets/report_btn.png" class="bad_img">
          <span class="bad_text">举报</span>
        </div>
        <!-- 删除按钮 -->
        <div class="btn_delete" v-show="isShow">
          <img src="../assets/trash_btn.png" class="bad_img">
          <span class="bad_text">删除</span>
        </div>
      </div>
      <!-- 回复框区域 -->
      <div class="reply_input_box" v-show="isOpen">
        <input type="test" class="reply_input" v-model.trim="inputReply" placeholder="回复" :style="isFocus?changeReplyInputStyle:''"/>
        <div class="btn_submit" v-if="isFocus" @click="submitInfor">发布</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'commentCard',
  components: {
  },
  props: ['list'],
  data () {
    return {
      isGood: false,
      isBad: false,
      isShow: false,
      isReply: true,
      isOpen: false,
      isFocus: true,
      inputReply: '',
      changeReplyInputStyle: [{'width': '88%'}, {'background-color': 'white'}, {'border': '1px solid #8590a6'}]
    }
  },
  computed: {
  },
  methods: {
    doChangeGood () {
      if (this.isGood) {
        this.list.comment.goodNum--
      } else {
        this.list.comment.goodNum++
      }
      this.isGood = !this.isGood
      this.isBad = false
    },
    doChangeBad () {
      this.isBad = !this.isBad
      if (this.isGood) {
        this.list.comment.goodNum--
      }
      this.isGood = false
    },
    submitInfor () {
      // 数据判断为空
      if (this.inputReply.length === 0) {
        this.$Message.error('回复不可为空!')
      } else {
        // 写回答的评论
        this.axios.get('/api/insertComment', {
          params: {
            aid: this.list.comment.aid,
            phone: sessionStorage.getItem('phone'),
            fromid: this.list.comment.uid,
            content: this.inputReply,
            state: 0
          }
        })
          .then((response) => {
            if (response.data.code === 200) {
              this.$Message.success('成功!')
              this.inputReply = ''
              this.getNewData()
              this.isOpen = false
            } else {
              this.$Message.error('失败!')
            }
          })
          .catch((error) => {
            this.$Notice.error({
              title: '通知',
              desc: '接口，异常！'
            })
            console.info(error)
          })
      }
    },
    getNewData () {
      this.$emit('getNewData', 1)
    }
  }
}
</script>

<style scoped>
  /*@import 'xxx.css';*/
  #commentCard{
    width: 100%;
    height: auto;
    display: inline-block;
    padding: 10px 20px 0px 20px;
    animation: flipInX 0.5s ease-in;
  }

  .head_box{
    width: 100%;
    height: auto;
    display: inline-block;
  }

  .head_img{
    width: 25px;
    height: 25px;
    float: left;
    margin-right: 5px;
  }

  .head_name{
    height: 25px;
    font-weight: 500;
    float: left;
    line-height: 25px;
    font-size: 15px;
    color: #1a1a1a;
  }

  .head_time{
    float: right;
    font-size: 14px;
    color: #8590a6;
  }

  .comment_box{
    width: 100%;
    height: auto;
    display: inline-block;
    padding-left: 30px;
  }

  .comment_text{
    width: 100%;
    height: auto;
    display: inline-block;
    text-align: left;
    font-size: 15px;
    color: #1a1a1a;
  }

  .comment_function{
    width: 100%;
    height: auto;
    display: inline-block;
    line-height: 25px;
    padding: 10px 0px 10px 30px;
    font-size: 14px;
  }

  .btn_good1,.btn_good2{
    height: 100%;
    width: auto;
    display: inline-block;
    cursor: pointer;
    float: left;
    color: #8590a6;
  }

  .good_img1,.good_img2,.bad_img{
    height: 15px;
    width: 15px;
    float: left;
    margin-top: 5px;
    margin-right: 5px;
    background-size: cover;
  }

  .good_img1{
    background-image: url("../assets/goodVote_gray.png");
  }

  .good_img2{
    background-image: url("../assets/goodVote_blue.png");
  }

  .btn_good1:hover .good_img1 {
    background-image: url("../assets/goodVote_grayDeep.png");
  }

  .btn_good1:hover{
    color: #535967;
  }

  .good_number{
    float: left;
  }

  .btn_bad,.btn_reply,.btn_report,.btn_delete{
    height: 100%;
    width: auto;
    display: inline-block;
    cursor: pointer;
    float: left;
    color: #8590a6;
    margin-left: 25px;
    transition: opacity 4s;
    transition-duration: 5s;
  }

  .btn_bad:hover,.btn_reply:hover,.btn_report:hover,.btn_delete:hover{
    color: #4d5360;
  }

  .reply_input_box{
    width: 100%;
    height: auto;
    padding-left: 30px;
    display: inline-block;
  }

  .reply_input{
    width: 100%;
    height: 35px;
    outline: none;
    float: left;
    color: #1a1a1a;
    border-radius: 3px;
    background-color: #f6f6f6;
    font-size: 14px;
    font-weight: normal;
    border: 1px solid #ebebeb;
    padding: 0 20px;
    transition-duration: 0.5s;
    -moz-transition-duration: 0.5s; /* Firefox 4 */
    -webkit-transition-duration: 0.5s; /* Safari 和 Chrome */
    -o-transition-duration: 0.5s; /* Opera */
    margin: 0 0 20px 0;
  }

  .btn_submit{
    height: 34px;
    width: auto;
    display: inline-block;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    float: right;
    border-radius: 3px;
    line-height: 34px;
    padding: 0px 12px;
    background-color: #0084ff;
  }

  .btn_submit:hover{
    background-color: #006dd5;
  }

</style>
